<template>
  <div class="app-page">
    <header class="app-head" v-if="sid==''">
      <tabNav :tabNavMenu="tabNavMenu"></tabNav>
      <div class="banner"><img src="../../../assets/image/publicTest/pclist-banner.jpg" /></div>
    </header>
    <header v-if="isShowTestData" class="app-head">
      <ul class="testImg">
        <li><a :href="testData.url" ca="zc_v170804_wzlist_zcdetail_click"><img :src="testData.imgUrl" /></a></li>
        <li><a :href="testData.url" class="txt" ca="zc_v170804_wzlist_zcdetail_click">{{ testData.txt }}</a></li>
      </ul>
    </header>
    <section class="app-main">
      <ul class="lists">
        <li v-for="item in dataList">
          <div class="userinfo">
            <h2 class="thumb"><img :src="item.thumb" /></h2>
            <div class="info">
              <p class="username">{{item.name}}</p>
              <p class="txt"><a :href="item.url" class="txt" ca="zc_v170628_wzlist_click">{{ item.title }}</a></p>
              <p class="program">服务项目：{{ item.expproject }}</p>
              <div class="imglist">
                <p v-if="item.pictures1"><a :href="item.url" ca="zc_v170628_wzlist_click"><img :src="item.pictures1" /></a></p>
              </div>
              <p class="time">{{ item.publishDate}}</p>
            </div>
          </div>          
        </li>
      </ul>
    </section>
    <a href="javascript:;" v-if="!isShowShareBtn&&isApp" class="shareGuide" @click="share"></a>
  </div>
</template>

<style lang="scss" scope>
@import '../../../assets/css/common.scss';
@import '../../../assets/css/dropload.css';
body{background:#edf0f5;font-size:rem(13);margin:0 auto !important;}
img{max-width:100%}
.app-page{
  .app-head{text-align:center;background:$_fff;    
    .testImg{padding:0 rem(15);height:rem(65);display:flex;align-items:center;margin-bottom:rem(8);position:relative;
      li{color:#000;font-size:rem(15);
        img{width:rem(32);height:rem(37);}
        .txt{color:#000;display:block;max-height:rem(65);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
        &:first-child{margin-right:rem(13)}
        &:last-child{width:80%;text-align:left;}
      }
      &:after{content:"";width:rem(7);height:rem(12);background:url(../../../assets/image/publicTest/dot-right.png) no-repeat;background-size:100% 100%;position:absolute;top:50%;right:rem(15);transform:translateY(-50%);}
    }   
  }
  .app-main{
    .lists{
      li{padding:rem(10);background:$_fff;border-bottom:1px solid #e8e8e8;
        .userinfo{margin-bottom:rem(15);
          .thumb{width:rem(36);height:rem(36);border-radius:50%;background:#959595;display:inline-block;vertical-align:top;
            img{width:rem(36);height:rem(36);border-radius:50%;}
          }
          .info{display:inline-block;width:82%;margin-left:rem(5);vertical-align:middle;
            .username{color:$_333;font-size:rem(15)}
            .txt{color:#333;font-size:rem(17);display:block;margin-top:rem(2);
              &:active{color:#666;}
            }
            .program{color:$_999;font-size:rem(13);margin:rem(5) 0 rem(11)}
            .imglist{display:flex;align-items:flex-start;
              p{margin-bottom:rem(5);
              &:nth-child(2){margin:0 rem(5);}
              img{width:80%;/* height:rem(123.34) */}
              }
            }
            .time{color:#bbb;margin-top:rem(5)}
          }
        }            
      }
    }
  }
 .shareGuide{
    width:rem(50);
    height:rem(50);
    line-height:rem(50);
    text-align:center;
    color:$_fff;
    background:transparent url("../../../assets/image/publicTest/share-icon.png") no-repeat top left;
    background-size:100% 100%;
    position:fixed;
    right:rem(5);
    top:50%;
    z-index:3;
  }
}
</style>

<script>
import common from "../../../assets/js/common.js";
import drop from "../../../assets/js/dropload.min.js";
import {Toast} from 'mint-ui';
import tabNav from "../common/tabNav";
export default {
  data() {
    return {
      tabNavMenu: [
        {name:'众测活动', url: '../publicTest.' + common.isHtml(), curMenu: 0},
        {name:'众测报告', url: '', curMenu: 1}
      ],
      testData:{},
      isShowTestData: false,
      getDateUrl:common.isdev() + '/zhongce/contents.htm?',
      //getDateUrl: 'http://www.easy-mock.com/mock/599d5294059b9c566dcd22c6/example/contents/',
      dataList:[],
      shareObj:{},
      signUrl:process.env.NODE_ENV == 'sit' || process.env.NODE_ENV == "development" ? common.isEnv("//recruit") : common.isEnv("//wx")  ,
      isShowShareBtn:common.checkAppversionIsGt35() || false,
      isApp:common.isApp(),
      sid:common.getQueryString('sid') ? common.getQueryString('sid') : '',
    }
  },
  components: {tabNav},
  created(){

   /* e.$http.get(e.getDateUrl).then(res=>{
      var data = JSON.parse( res.body.trim() ), oDate = data.result.creditTradeVOs, len = oDate.length;
      data.errorCode && len > 0 && (e.dataList = oDate);

    },(err)=>{
      Toast("网络异常");
    });*/
  },
  mounted(){
    var vm = this;
    //加载数据
    if(vm.$data.sid){
      vm.getDate();
    }    
    vm.pageLoad(vm);

    //分享数据配置
    vm.shareObj = {
      friend: {
        title: "【众测达人】毒舌点评，真相只有一个！",
        desc: "商品到底靠不靠谱？评测广场带你走向事实真相！",
        link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
        imgUrl: "https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zs.png"
      },
      friendQuan: {
        title: "",
        desc: "【众测达人】毒舌点评，真相只有一个！",
        link: window.location.protocol + "//" + window.location.host + window.location.pathname + '?utm_source=share',
        imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/zs.png"
      }
    };
    
    //分享判断渠道
    if(!common.isApp()){       
       common.wxShare(vm);
    }else{
      if(vm.$data.isShowShareBtn){
       vm.share();  
      }
    }
    
		//打点
		vm.$nextTick(function () {
			common.ANA_AnalyticsScan();
		});
  },
  methods:{
    //分享
    share(){
      var vm = this;
      common.appShare(vm);
    },
    //取url参数
    getDate(){
      var vm = this;
      let data = vm.$data, txt = vm.getRequest('title'), imgUrl = vm.getRequest('imgUrl'), url = vm.getRequest('url');
      if(txt == null || imgUrl == null || url == null){
        Toast('参数获取异常');
      }else{        
        vm.$set(data.testData, 'txt', txt);
        vm.$set(data.testData, 'imgUrl', imgUrl);
        vm.$set(data.testData, 'url', '../' + url);
        vm.$set(data, 'isShowTestData', true);
      }      
    },
    //获取url参数,解决common.js中的getQueryString中文乱码
    getRequest(name) {   
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return decodeURI(decodeURI(r[2])); return null;
    },
    pageLoad(e){
    	var vm = this;
      var num = 0, data = vm.$data;
      //检测是否带参
      if(data.sid){
        data.getDateUrl +="sid=" + data.sid + "&";
      }
      $('.app-main').dropload({
        scrollArea : window,
        domUp: {
            domClass: "dropload-up",
            domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate: '<div class="dropload-update">↑释放更新</div>',
            domLoad: '<div class="dropload-load"><span class="loading"></span>刷新中...</div>'
         },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domUpdate  : '<div class="dropload-update">↓释放加载</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多数据了~！</div>'
        },
        loadUpFn: function(me){            
          //下拉刷新延迟1s刷新
          setTimeout(function() {
            me.resetload();
          }, 1000)            
        },
        loadDownFn : function(me){
          num++;
          $.ajax({
            type: 'GET',
            url: data.getDateUrl + 'pageSize=15&pageIndex=' + num,
            //url: data.getDateUrl + num,
            dataType: 'json',
            success: function(o){
              var code = o.result, msg = o.msg;            
              if( code == 1 ){
                var oData = o.obj, total = oData.totalRows,
                     arr = oData.creditTradeVOs,
                     len = arr.length;                      
                if(total == data.dataList.length + len){
                  // 锁定
                  me.lock();
                  // 无数据
                  me.noData();                               
                }
                if(len>0){
                    let dataArr = [];
                    for(var i=0; i < len; i++){
                      let dataObj = arr[i],
                          sid = data.sid ? 'sid='+ data.sid +'&' : '';
                      dataObj.url = '../commentDetail/commentDetail.'+ common.isHtml() +'?' + sid +'id=' + dataObj.id;
                      dataArr.push(dataObj);
                    }
                    //延迟1s渲染数据
                    setTimeout(function () {   
                      vm.$set(data, 'dataList', data.dataList.concat(dataArr));  
                      vm.$nextTick( () => {
                        me.resetload();
                        //打点
                        common.ANA_AnalyticsScan();                     
                       } );  
                      me.lock();         
                      if(total > data.dataList.length){
                        $(window).bind('scroll', () => {
                          let curScroll = $(document.body).scrollTop(), elmTop = $(document.body).height() -  $(".lists li:last-child").height() - $('.dropload-down').height(), winH = $(window).height();
                          //当显示完一页的时候，再去加载
                          if(curScroll + winH >= elmTop) {
                            //解锁
                            me.unlock();                                                     
                          }
                        });
                      }else {
                        $(window).unbind('scroll')
                      }
                    },1000);                   
                }
              }else {
                Toast(msg);
              }    
            },
            error: function(xhr, type){
              Toast("服务器开小差啦");
              // 即使加载出错，也得重置
              setTimeout(function(){
                me.resetload();
              },1000);
            }
          });
        }       
      });
    }
  }
}


</script>